<template>
  <my-vanskeleton :loading="skeletonLoading">
    <template v-slot:my-content>
      <div class="company-style">
        <!-- 导航栏 start -->
        <van-nav-bar title="职位" fixed />
        <!-- 导航栏 end -->

        <!-- 内容 start -->
        <div class="content-top jobs-index">
          <van-tabs v-model="tabIndex" swipeable animated sticky :offset-top="46" title-active-color="#07f">
            <template #nav-right>
              <div class="operate">
                <span @click="addJob">
                  <van-icon name="add-o" />新发职位
                </span>
                <span @click="batchJob">
                  <van-icon name="bars" />批量操作
                </span>
              </div>
            </template>
            <van-tab title="在招">
              <van-empty description="暂无相关信息" v-if="onLineList.length == 0 && tab0Loading==false" />
              <van-list class="list" :load="tab0Loading" @load="loadData" :finished="finished1" v-else>
                <div class="item" v-for="(item,index) in onLineList" :key="index">
                  <div class="info" @click="jobClick(item.jobIDEncrypt)">
                    <div class="left">
                      <b>{{item.jobName}}</b>
                      <!-- <p>
                    <small class="good">已刷新</small>
                    <small class="good">排名靠前</small>
                    <small class="good">自动再发布</small>
                  </p> -->
                      <p>
                        <span class="begin" style="color:green">{{item.publishDateStr}}</span>
                        <i></i>
                        <span class="look">{{item.clicks}}</span>
                      </p>
                    </div>
                    <div class="right">
                      <b>{{item.resumeCount}}</b>
                      <span>收到简历</span>
                    </div>
                  </div>
                  <div class="btns">
                    <p>
                      <span @click="operateJob('Refresh',item.jobIDEncrypt)">刷新</span>
                      <span @click="operateJob('Stop',item.jobIDEncrypt)">停止</span>
                      <!-- <span>分享</span> -->
                    </p>
                    <p>
                      <span class="again" @click="operateJob('PubAgain',item.jobIDEncrypt)">再发布</span>
                    </p>
                  </div>
                </div>
              </van-list>
            </van-tab>
            <van-tab title="停止">
              <van-empty description="暂无相关信息" v-if="offLineList.length == 0 && tab1Loading==false" />
              <van-list class="list" :load="tab1Loading" @load="loadData" :finished="finished2" v-else>
                <div class="item" v-for="(item,index) in offLineList" :key="index">
                  <div class="info" @click="jobClick(item.jobIDEncrypt)">
                    <div class="left">
                      <b>{{item.jobName}}</b>
                      <p>
                        <span class="begin" style="color:green">{{item.publishDateStr}}</span>
                        <i></i>
                        <span class="look">{{item.clicks}}</span>
                      </p>
                    </div>
                    <div class="right">
                      <b>{{item.resumeCount}}</b>
                      <span>收到简历</span>
                    </div>
                  </div>
                  <div class="btns">
                    <p>
                      <span @click="operateJob('ReStart',item.jobIDEncrypt)">发布</span>
                    </p>
                    <p>
                      <span @click="operateJob('Del',item.jobIDEncrypt)" class="delete">删除</span>
                    </p>
                  </div>
                </div>
              </van-list>
            </van-tab>
          </van-tabs>
        </div>
        <!-- 内容 end -->
      </div>
    </template>
  </my-vanskeleton>
</template>

<script>
import { NavBar, Tab, Tabs, List, Sticky, Icon, Toast, Dialog } from "vant";
import MyVanskeleton from '@/components/MyVanskeleton.vue';
import Global from '@/Global';
export default {
  name: "LivePlay",
  components: {
    MyVanskeleton,
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [Sticky.name]: Sticky,
    [Icon.name]: Icon,
  },
  // 定义属性
  data() {
    return {
      //tabindex
      tabIndex: 0,
      //loading
      skeletonLoading: true,
      tab0Loading: false,
      tab1Loading: false,
			finished1:false,
			finished2:false,
      //data list
      onLineList: [],
      offLineList: [],
    };
  },
  created() {
    this.$bus.$on(Global.bus_company_joblist_update, () => {
      this.loadData();
    })
  },
  mounted() {
    this.loadData();
  },
  // 方法集合
  methods: {
    loadData() {
      this.skeletonLoading = false;
      this.tab0Loading = true;
      this.tab1Loading = true;
      this.$api.get('/CompanyStation/GetStationList4JobIndex').then(res => {
        this.skeletonLoading = false;
				this.tab0Loading = false;
        this.tab1Loading = false;
        if (res.response != null && res.response.onLineList.length > 0) {
          this.onLineList = res.response.onLineList;
					this.finished1 =true;
        }
				if (res.response != null && res.response.offLineList.length > 0) {
          this.offLineList = res.response.offLineList;
					this.finished2 =true;
        }
      })
    },
    addJob(jobIDEncrypt) {
      this.$router.push({ name: 'company-job-publish' })
    },
    operatMul() {

    },
    jobClick(jobIDEncrypt) {
      this.$router.push({ name: 'company-job-publish', query: { jobIDEncrypt: jobIDEncrypt } })
    },
    operateJob(operation, jobID) {
      if (operation == 'PubAgain') {
        Dialog.confirm({ title: '资源消耗提醒', message: '每个岗位再发布将扣除<span style="color:red;margin:2px">1</span>个职位数，岗位在职位搜索页置顶<span style="color:blue;margin:2px">3</span>天，确认继续？' }).then(() => {
          this.doOperateJob(operation, jobID);
        }).catch(() => { });
      }
      else if (operation == 'Del') {
        Dialog.confirm({ title: '删除提醒', message: '删除后不可恢复，确认继续？' }).then(() => {
          this.doOperateJob(operation, jobID);
        }).catch(() => { });
      }
      else {
        this.doOperateJob(operation, jobID);
      }
    },
    doOperateJob(operation, jobID) {
      this.$api.post('/CompanyStation/OperateStation?operation=' + operation, [jobID]).then(res => {
        Toast(res.msg);
        if (res.success) {
          this.loadData();
        }
      })
    },
    shareJob() {

    },
    batchJob() {
      this.$router.push({ name: 'company-job-batch', query: { jobState: this.tabIndex == 0 ? 1 : 0 } });
    }
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>